<template>
	<view>
		<!-- 标题栏 -->
		<head-navbar :back="true" :bgColor="'#fff'">
			<view class="">创建订单</view>
		</head-navbar>
		<!-- 地址 -->
		<view class="address-section" v-if="orderType == 3">
			<view class="order-content">
				<image src="../../static/img/user.png" mode="" class="userImg"></image>
				<view class="cen">
					<view class="top">
						<text class="name">{{orderList.orderLogisticsModel.consigneeName}}</text>
						<text class="mobile">{{orderList.orderLogisticsModel.consigneePhone}}</text>
					</view>
					<view class="address">{{orderList.orderLogisticsModel.consigneeAddress}}</view>
				</view>
				<view class="right iconfont icon-fanhui"></view>
			</view>
		</view>
		<view @click="toaddress" class="address-section" v-else>
			<view class="order-content" v-if="noAddress">
				<text v-if="noAddress">添加收货地址</text>
				<view class="right iconfont icon-fanhui"></view>
			</view>
			<view class="order-content" v-else>
				<image src="../../static/img/user.png" mode="" class="userImg"></image>
				<view class="cen">
					<view class="top">
						<text class="name">{{addressData.consigneeName}}</text>
						<text class="mobile">{{addressData.consigneePhone}}</text>
					</view>
					<view class="address">{{addressData.region}}{{addressData.detailAddress}} </view>
				</view>
				<view class="right iconfont icon-fanhui"></view>
			</view>
		</view>
		<view class="goods-section" v-for="items in goodsData" v-if="orderType == 1">
			<!-- <view class="g-header b-b">
				<image class="logo" :src="items.shopDetail.image"></image>
				<text class="name">{{items.shopDetail.shopName}}</text>
			</view> -->
			<!-- 商品列表 -->
			<view v-for="item in items.goodsList" style="padding-top: 1rpx;">
				<view class="g-item" v-for="item in items.goodsList">
					<image :src="item.image"></image>
					<view class="right">
						<text class="title clamp">{{item.goodsName}}</text>
						<view class="price-box">
							<view class="left">
								<text class="price">￥{{item.price}}</text>
							</view>
							<text class="number">x {{item.num}}</text>
						</view>
						<text class="spec">规格：{{item.specName}}</text>
					</view>
				</view>
			</view>
			<view class="size-box" v-if="goodsType==2">
				<view class="left">
					<text class="tit">运费：</text>
				</view>
				<text class="number">{{freight}}</text>
			</view>
		</view>

		<view class="goods-section" v-for="(items,index) in cartList" v-if="orderType == 2">
			<!-- <view class="g-header b-b">
			<image class="logo" :src="items[0].merchantName"></image>
			<text class="name">{{items[0].merchantName}}</text>
		</view> -->
			<!-- 商品列表 -->
			<view v-for="item in items" style="padding-top: 1rpx;">
				<view class="g-item">
					<image :src="item.goodsImg"></image>
					<view class="right">
						<text class="title clamp">{{item.goodsName}}</text>
						<view class="price-box">
							<view class="left">
								<text class="price">￥{{item.unitPrice}}</text>
							</view>
							<text class="number">x {{item.quantity}}</text>
						</view>
						<text class="spec">规格：{{item.goodsSpecsName}}</text>
					</view>
				</view>
			</view>
			<view class="size-box" v-if="goodsType==2">
				<view class="left">
					<text class="tit">运费：</text>
				</view>
				<text class="number">{{freight}}</text>
			</view>
		</view>



		<view class="goods-section" v-for="(items,index) in orderList.merOrderList" v-if="orderType == 3">
			<!-- <view class="g-header b-b">
			<image class="logo" :src="items.merchantInfoModel.head"></image>
			<text class="name">{{items.merchantInfoModel.name}}</text>
		</view> -->
			<!-- 商品列表 -->
			<view v-for="item in items.orderVoList" style="padding-top: 1rpx;">
				<view class="g-item">
					<image :src="item.goodsImg"></image>
					<view class="right">
						<text class="title clamp">{{item.goodsName}}</text>
						<view class="price-box">
							<view class="left">
								<text class="price">￥{{item.paymentAmount}}</text>
							</view>
							<text class="number">x {{item.quantity}}</text>
						</view>
						<text class="spec">规格：{{item.goodsSpecsName}}</text>
					</view>
				</view>
			</view>
			<view class="size-box" v-if="goodsType==2">
				<view class="left">
					<text class="tit">运费：</text>
				</view>
				<text class="number">{{freight}}</text>
			</view>
		</view>

		<view class="cashTitle" v-if="setstatus()">
			交易方式
		</view>
		<!-- 金额明细 -->
		<view class="yt-list" v-if="setstatus()">
			<view class="yt-list-cell b-b" @click="payType = 3">
				<view class="cell-tit clamp">
					<image src="../../static/img/doudou.png" mode=""></image>
					<text class="cell-tit clamp">余额</text>
				</view>
				<image src="../../static/img/xuanzhong1.png" mode="" v-if="payType == 3"></image>
				<image src="../../static/img/xuanzhong2.png" mode="" v-else></image>
			</view>
			<view class="yt-list-cell b-b" @click="payType = 4">
				<view class="cell-tit clamp">
					<image src="../../static/img/money.png" mode=""></image>
					<text class="cell-tit clamp">消费券</text>
				</view>
				<image src="../../static/img/xuanzhong1.png" mode=" " v-if="payType == 4"></image>
				<image src="../../static/img/xuanzhong2.png" mode="" v-else></image>
			</view>
			<view class="yt-list-cell b-b" @click="payType = 1">
				<view class="cell-tit clamp">
					<image src="../../static/img/hongbao.png" mode=""></image>
					<text class="cell-tit clamp">现金</text>
				</view>
				<image src="../../static/img/xuanzhong1.png" mode="" v-if="payType == 1"></image>
				<image src="../../static/img/xuanzhong2.png" mode="" v-else></image>
			</view>
			<!-- <view class="yt-list-cell b-b" @click="payType = 4">
				<view class="cell-tit clamp">
					<text class="iconfont icon-USDT usdt"></text>
					<text class="cell-tit clamp">USDT</text>
				</view>
				<image src="../../static/img/xuanzhong1.png" mode="" v-if="payType == 4"></image>
				<image src="../../static/img/xuanzhong2.png" mode="" v-else></image>
			</view> -->
		</view>
		<!-- 底部 -->
		<view class="footer">
			<view class="price-content" style="display: flex;align-items: center;">
				<text>实付款:</text>
				<!-- <image src="../../static/img/paycounp.png" mode="" style="width: 40upx;height: 40upx;padding: 0 10upx;"  v-if="goodsType == 1"></image>
			<text class="price" v-if="goodsType == 1">{{price}}</text> -->
				<span class="price"><span>￥{{price+freight}}</span></span>
			</view>
			<text class="submit" @click="submit()">提交订单</text>
		</view>

		<pwd-popup ref="pwdPopup" @sendData="pwdData"></pwd-popup>
		<tfgg-verify @result='verifyResult' ref="verifyElement"></tfgg-verify>
	</view>
</template>

<script>
	import tfggVerify from "@/components/tfgg-verify/tfgg-verify.vue";
	import {
		cartCreateOrder,
		createOrder,
		pay
	} from '../../api/order/index'
	import {
		getFreight,
		getFreightCart
	} from '../../api/goods/index'
	import * as api from '@/api/user/address.js';
	export default {
		components: {
			"tfgg-verify": tfggVerify
		},
		data() {
			return {
				goodsData: [],
				cartList: [],
				type: 0,
				price: 0,
				data: '',
				ids: null,
				maskState: 0, //优惠券面板显示状态
				desc: '', //备注
				payType: 3,
				couponList: [{
						title: '新用户专享优惠券',
						price: 5,
					},
					{
						title: '庆五一发一波优惠券',
						price: 10,
					},
					{
						title: '优惠券优惠券优惠券优惠券',
						price: 15,
					}
				],
				addressData: {},
				noAddress: false,
				goodsId: "",
				goodsSpecsId: "",
				goodsType: '',
				userAddressId: '',
				quantity: '',
				orderType: null,
				orderList: '',
				orderId: '',
				number: '',
				freight: 0,
				allCoupons: 0,
				ids2: []

			}
		},
		onLoad(option) {
			this.type = option.goodsType
			this.orderType = option.orderType
			this.price = Number(option.price)
			this.goodsId = option.goodsId
			this.number = option.number
			if (this.orderType == 1) {
				this.goodsSpecsId = option.goodsSpecsId
				this.goodsType = option.goodsType == 1 ? option.goodsType : 2
				// if(this.goodsType == 1){
				// 	this.payType = 4
				// }
				this.goodsData = uni.getStorageSync('goodsData')
				this.quantity = this.goodsData[0].goodsList[0].num
				this.getList()
			} else if (this.orderType == 2) {
				this.goodsType = 2
				this.ids = option.ids
				this.ids2 = option.ids2
				this.allCoupons = option.allCoupons
				console.log(this.ids)
				this.cartList = uni.getStorageSync('cartList')
				// if((this.price + this.freight) == 0){
				// 	this.payType = 4
				// }
				this.getList()
			} else if (this.orderType == 3) {
				this.orderId = option.orderId
				this.goodsType = option.goodsType
				this.goodsType = 2
				this.freight = option.freight
				this.orderList = uni.getStorageSync('orderList')
			}
		},
		methods: {
			setstatus() {
				// if(this.goodsType == 2){
				// 	if(this.orderType == 2 && this.ids2 == ''){
				// 		return false
				// 	}else{
				// 		return true
				// 	}
				// }else{
				// 	return false
				// }
				return true
			},
			toaddress() {
				uni.navigateTo({
					url: '/pages/my/myService/setting/address/address?type=create&goodsType=' + this.goodsType + '&ids2=' + this.ids2 +
						'&orderType=' + this.orderType
				})
			},
			getFreight2(id) {
				getFreight({
					goodsId: this.goodsId,
					addressId: id,
					quantity: this.number
				}).then(res => {
					this.freight = res.data.obj
				}).catch(err => {

				})
			},
			getFreightCart2(id) {
				if (this.ids2 == '') {
					return
				}
				getFreightCart({
					ids: this.ids2,
					addressId: id
				}).then(res => {
					this.freight = res.data.obj
				}).catch(err => {

				})
			},
			async getList() {
				let param = {
					pageNum: 1,
					pageSize: 9999
				}
				try {
					const ret = await api.getUserAddressList(param);
					if (ret.data.obj.length > 0) {
						this.addressData = ret.data.obj[0]
						if (this.goodsType == 2) {
							if (this.orderType == 2) {
								this.getFreightCart2(this.addressData.id)
							} else {
								this.getFreight2(this.addressData.id)
							}
						}

					} else {
						this.noAddress = true
					}
				} catch (error) {

				}
			},
			/* 校验结果回调函数 */
			verifyResult(res) {
				if (res) {
					this.$refs.verifyElement.reset(); //校验成功重置插件
					uni.showLoading({
						title: '加载中'
					});
					this.$refs.pwdPopup.show();
					uni.hideLoading()
				}
				console.log(res);
			},
			submit() {
				// ES6
				var key = Object.keys(this.addressData);
				//判断需不要校验地址
				if(key.length == 0 && this.orderType != 3){
					uni.showToast({
						title: "请选择收货地址",
						icon: 'none'
					})
				}else{
					//判断支付需不需要输密码
					if (this.payType == 1) {
						this.orderTypeFunc();
					} else {
						this.$refs.verifyElement.show();
					}
				}
			},
			//需要密码的支付
			pwdData(data) {
				// pwd
				this.data = data;
				this.$refs.pwdPopup.hide();
				uni.showLoading({
					title: '支付中'
				});
				this.orderTypeFunc()
			},
             //根据订单类型判断是哪种订单支付
			 orderTypeFunc(){
				 if(this.orderType == 1) {
					 this.createOrderFunc()
				 }
				 else if(this.orderType == 2) {
					 this.cartCreateOrderFunc()
				 }
				 else if(this.orderType == 3) {
					 this.payFunc()
				 }
			 },
			//单个个商品支付
			createOrderFunc() {
				createOrder({
					goodsId: this.goodsId,
					goodsSpecsId: this.goodsSpecsId,
					goodsType: this.goodsType,
					userAddressId: this.addressData.id,
					quantity: this.quantity,
					tradePwd: this.data,
					payType: this.payType
				}).then(res => {
					if (this.payType == 1) {
						var obj = JSON.parse(res.data.obj)
						uni.setStorageSync('payOrderId',obj.payNo)
						uni.setStorageSync('shadeUrl', obj.url)
						uni.navigateTo({
							url: '/pages/order/shande?'
						})
					} else {
						uni.navigateTo({
							url: '/pages/order/payScuess'
						})
					}
				})
			},
			//购物车支付
			cartCreateOrderFunc() {
				cartCreateOrder({
					userAddressId: this.addressData.id,
					ids: this.ids,
					tradePwd: this.data,
					payType: this.payType
				}).then(res => {
					if (this.payType == 1) {
						var obj = JSON.parse(res.data.obj)
						uni.setStorageSync('payOrderId',obj.payNo)
						uni.setStorageSync('shadeUrl', obj.url)
						uni.navigateTo({
							url: '/pages/order/shande?'
						})
					} else {
						uni.navigateTo({
							url: '/pages/order/payScuess'
						})
					}
				})
			},
			//待支付订单支付
			payFunc() {
				pay({
					orderId: this.orderId,
					tradePwd: this.data,
					payType: this.payType
				}).then(res => {
					// 判断支付方式
					if (this.payType == 1) {
						var obj = JSON.parse(res.data.obj)
						uni.setStorageSync('payOrderId',obj.payNo)
						uni.setStorageSync('shadeUrl', obj.url)
						uni.navigateTo({
							url: '/pages/order/shande?'
						})
					} else {
						uni.navigateTo({
							url: '/pages/order/payScuess'
						})
					}
				})
			},
			//显示优惠券面板
			toggleMask(type) {
				let timer = type === 'show' ? 10 : 300;
				let state = type === 'show' ? 1 : 0;
				this.maskState = 2;
				setTimeout(() => {
					this.maskState = state;
				}, timer)
			},
			numberChange(data) {
				this.number = data.number;
			},
			changePayType(type) {
				this.payType = type;
			},
			stopPrevent() {}
		}
	}
</script>

<style lang="scss">
	@import './createOrder.scss';
</style>
